import React,{useEffect,useState} from "react";
import { Button, Space, Toast,Popover} from "antd-mobile";
import "@nutui/nutui-react/dist/style.css";
import { useNavigate } from "react-router-dom";
import { SearchBar } from "@nutui/nutui-react";
import './mywork.css'

export default function Mywork() {
  const navigate = useNavigate();
  const [basic, setBasic] = useState(false);
  const [dark, setDark] = useState(false);
  const itemList = [
    {
      key: "/addZh",
      name: "添加账号",
    },
    {
      key: "/guan",
      name: "管理账号",
    },
  ];
  const medicalMessages = [
    { id: 1, message: '患者张三的检查报告已更新' },
    { id: 2, message: '李四的预约时间已确认' },
    { id: 3, message: '王五的转诊申请已处理' },
    { id: 4, message: '赵六的手术安排已确定' },
    { id: 5, message: '孙七的药物过敏测试结果已出' },
    { id: 6, message: '周八的康复计划已更新' },
    { id: 7, message: '吴九的体检报告有异常需复查' },
    { id: 8, message: '郑十的会诊时间已调整' },
  ];
  const [isClicked, setIsClicked] = useState(false);
      
  const handleMessageClick = () => {
    setIsClicked(!isClicked);
  };
  return (
    <div className="medical-container">
      <p className="medical-divider"></p>
      <SearchBar 
        shape="round" 
        maxLength={5}
        className="medical-search"
      />
      <p className="medical-divider"></p>
      <div className="medical-space">
        <Space wrap justify="center">
          <Button className="medical-button">推荐同事</Button>
          <Button className="medical-button" onClick={()=>{
            navigate('/guan')
          }}>工作室成员</Button>
          <Button
            className="medical-button"
            onClick={() => {
              navigate("/addZh");
            }}
          >
            权限管理
          </Button>
         
        </Space>
      </div>
      <div className="medical-message-section">

        {medicalMessages.map(msg => (
          <p key={msg.id} onClick={handleMessageClick} className={isClicked ? 'medical-message-section-clicked' : ''}>{msg.message}</p>
        ))}
      </div>
    </div>
  );
}